<template>
  <div class="page">
      <div class="header">
        <div class="iconfont hico" @click="$router.back()">&#xe603;</div>
        <div class="title">手机登录</div>
       <!-- 小U商城 -->
       <!-- <div class="hr"></div> -->
       </div>
       <div class="main">
          <!-- <h1>欢迎登录小U商城</h1> -->
          <div class="inner">
          <div class="imgs">
            <img src="../assets/img/pic/logo/orange.png" alt="" >
          </div>
          <div class="inp">
            <div><input type="text" name="" id="" placeholder="手机号"></div> 
            <div class="inp2">
                <input type="text" name="" id="" placeholder="验证码">
                <div class="box">获取验证码</div>
            </div> 
          </div>
          <div class="btn">登&nbsp;&nbsp;&nbsp;录</div>
          <!-- <p>手机号验证注册/登录</p> -->
       </div>
       </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.page{
    min-width: 3.75rem;
    width: 7.5rem;
    height: 100vh;
    margin: 0 auto;
    position: relative;
    
}
.header{
     width: 7.5rem;
     height: 0.88rem;
     line-height: 0.88rem;
     background-color: #FF6040;
     display: flex;
     color:#fff;
     align-items: center;
     position: relative;
     /* text-align: center; */
     /* padding: 0 0.1rem; */    
 }
 .hico{
    font-size: 0.45rem;
    /* margin-left: 0.2rem; */
    /* flex: 1; */
    /* text-align: left; */
    position: absolute;
    left:0.2rem ;
 }
 .header .title{
     /* color: */
     font-size: 0.34rem;
     flex: 1;
     /* margin: 0 auto; */
     text-align: center;
 }
 .header .hr{
     /* display: inline-block; */
     width: 1.74rem;
     /* flex: 1; */
     position: absolute;
     right:0.12rem;
     height: 0.64rem;
     border: 0.005rem solid rgba(255,255,255,.25);
     border-radius: 0.32rem;
     /* margin-right: 0.1rem; */
     /* flex: 1; */
 }
 .main{
   width: 7.1rem;
   /* text-align: center; */
   /* position: relative; */
   /* height: 100%; */
   overflow: hidden;
   padding: 0.2rem;
   background-color: rgb(242, 242, 242);
 }
 .main .inner{
     width: 7.1rem;
     /* height: 100%; */
     background-color: #fff;
     overflow: hidden;
 }
 /* .main h1{
   font-size: 0.48rem;
   color: #666;
   margin-top: 4.12rem;
 } */
 .main .inner .imgs{
  
   width: 3.64rem;
   height: 0.96rem;
   margin: 0 auto;
    margin-top: 4.88rem;
 }
 .main .inner .imgs img{
   width: 3.64rem;
   height: 0.96rem;
 }
 .main .inner .btn{
   outline: none;
   border: none;
   width: 6.1rem;
   height: 0.98rem;
   line-height: 0.98rem;
   background-color: #ccc;
   color:#fff;
   font-size: 0.32rem;
   margin: 0 auto;
   text-align: center;
   margin-top: 0.16rem;
 }
 .main .inner p{
   font-size: 0.24rem;
   color:#333;
   margin-top: 0.4rem;
 }
 .main .inner .inp{
     width: 6.1rem;
     margin: 0 auto;
 }
 .main .inner .inp .inp2{
     position: relative;
     /* background-color: gold; */
 }
.main .inner .inp>div{
    margin-top:0.56rem;
}
 .main .inner .inp .inp2 .box{
     position: absolute;
     right: 0;
     bottom: 0;
     width: 1.6rem;
     height: 0.48rem;
     background-color: #ccc;
     text-align: center;
     line-height: 0.48rem;
     color:#fff;

 }
 .main .inner .inp input{
     outline:  none ;
     border: none;
     height: 0.48rem;
     /* margin-top:0.56rem; */
     /* background-color: teal; */
 }
</style>